<template>
  <div id="app">
    <Topbar :key="count"></Topbar>
    <Header></Header>
    <router-view />
    <Footer></Footer>
    <Login v-show="isShowLoginModal"></Login>
    <transition name="res">
      <Toast v-show="isToastStatus"></Toast>
    </transition>
  </div>
</template>

<script>
import Topbar from '@/components/Topbar.vue'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import Login from '@/components/Login.vue'
// import axios from 'axios'
/* import axios from '@/request/request' */
/* import axios from '@/request/api' */
import Toast from '@/components/Toast.vue'
import { mapState } from 'vuex'
export default {
  created() {
    console.log('开发环境配置：', process.env.VUE_APP_BASE_URL)
    console.log('生产环境配置s：', process.env.VUE_APP_MY_TEXT)
  },
  components: {
    Topbar,
    Header,
    Footer,
    Login,
    Toast
  },
  data() {
    return {
      imgs: [],
      count: 10
    }
  },
  computed: {
    ...mapState({
      isShowLoginModal: (state) => state.showLoginModal.isShowLoginModal,
      isToastStatus: (state) => state.toastShow.isToastStatus
    })
  },
  watch: {
    '$route.path': {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          this.count++
        }
      }
    }
  },
  // created(){
  //   axios.get('/shop/userProfiles').then((res)=>{
  //     console.log(res)
  //   })
  // },
  /*  created(){
        axios.get('http://mockjs.xiaoyaoji.cn/mock/1h9xcTeAZzV/products/recommend').then((res)=>{
        console.log(111)
        console.log(res)
      }).then((err)=>{
        console.log(333)
      })
    }, */
  mounted() {
    console.log(222)
  }
}
</script>
<style lang="less">
/* 开始透明度从为开始   */
.res-enter,
.res-leave-to {
  opacity: 0;
}
.res-enter-active,
.res-leave-active {
  transition: opacity 0.8s linear;
}
.res-enter-to,
.res-leave {
  opacity: 1;
}
</style>
